<template>
    <div>
        <div v-for="product in products" :key="product.name" v-show="product.number">
            <span style="margin-right: 30px">{{product.name}}--数量{{product.number}}--单价{{product.price}}</span>
            <button @click="addOne(product)">增加</button>
            <button @click="deleteOne(product)">减少</button>
        </div>
        <div class="total-price">
            总价：{{totalPrice}}
        </div>
    </div>
</template>
<script>
export default {
    props: {
        products: {
            type: Array,
            default () {
                return []
            }
        }
    },
    computed: {
        totalPrice() {
            let total = 0
            this.products.forEach(product => {
                total += product.number * product.price
            });
            return total
        }
    },
    methods: {
        addOne(product) {
            product.number++
        },
        deleteOne(product) {
            if(product.number===0){
                return 
            }
            product.number--
        }
    }
}
</script>
<style lang="scss">
    .total-price {
        color: red;
    }
</style>